<template>
  <el-drawer title="查看商品详情" v-model="dialogVisibale" size="30%" :destroy-on-close="true">
    <el-row>
      <el-col :span="6">名称：</el-col>
      <el-col :span="18">{{ skuDetail.skuName }}</el-col>
    </el-row>

    <el-row>
      <el-col :span="6">描述：</el-col>
      <el-col :span="18">{{ skuDetail.skuDesc }}</el-col>
    </el-row>

    <el-row>
      <el-col :span="6">价格：</el-col>
      <el-col :span="18">{{ skuDetail.price }}</el-col>
    </el-row>

    <el-row>
      <el-col :span="6">平台属性：</el-col>
      <el-col :span="18">
        <el-tag type="primary" v-for="(item, index) in skuDetail.skuAttrValueList" :key="index" style="margin: 5px">{{ item.valueName }}</el-tag>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="6">销售属性：</el-col>
      <el-col :span="18">
        <el-tag type="danger" v-for="(item, index) in skuDetail.skuSaleAttrValueList" :key="index" style="margin: 5px">{{ item.saleAttrValueName }}</el-tag>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="6">商品图片：</el-col>
      <el-col :span="18">
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="item in skuDetail.skuImageList" :key="item.id">
            <el-image :src="item.imgUrl" fit="cover" style="width: 100%; height: 100%" />
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import type { SkuData } from '@/api/product/sku/types'
  import { reqSkuInfo } from '@/api/product/sku'
  import { getElMessage } from '@/utils/message'

  const dialogVisibale = ref<boolean>(false)
  const skuDetail = ref<any>({})
  function openDilog(row: SkuData) {
    dialogVisibale.value = true
    getSkuInfo(row)
  }

  function closeDilog() {
    dialogVisibale.value = false
  }

  async function getSkuInfo(row: SkuData) {
    try {
      row.skuDetailLoading = true
      const res: any = await reqSkuInfo(row.id as number)
      if (res.code === 200) {
        skuDetail.value = res.data
      } else {
        getElMessage('获取商品详情失败', 'error')
      }
    } catch (error) {
      getElMessage((error as Error).message, 'error')
    } finally {
      row.skuDetailLoading = false
    }
  }

  defineExpose({
    openDilog,
    closeDilog,
  })
</script>

<style lang="scss" scoped>
  .el-row {
    &:not(:first-child) {
      margin-top: 10px;
    }
  }

  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
</style>
